<style lang="less">
	.editor-info{
		padding:10px 15px;
		display: block;
		color:#333;
		border-bottom: 1px solid #ccc;
		img{
			vertical-align: super;
		}
	}
	.editor-name{
		display: inline-block;
		position: relative;
		margin-left: 5px;
		span{
			display: block;
			&.editor-bio{
				font-size: 12px;
				color:#ccc;
				margin-top: 10px;
			}
		}
	}
</style>
<template>
	<div class="editors">
	 <header class="header">
      <a @click="prevPage"><i class="fa fa-arrow-left"></i></a>
      <span>主编</span>
    </header>
    <ul class="editors-list">
    	<router-link :to="/editor-detail/+ editor.id" class="editor-info" v-for="editor in editors">
    		<img :src="imgUrl+'/public-pic?img='+editor.avatar" class="img-circle" width="30" height="30">
    		<div class="editor-name">
    			<span>{{editor.name}}</span>
    			<span class="editor-bio">{{editor.bio}}</span>
    		</div>
    	</a>
    </ul>
	</div>
</template>
<script type="text/javascript">
import {mapState} from 'vuex'
	export default {
		methods:{
			prevPage() {
				this.$router.go(-1)
        this.$store.commit('CHANGE_TRANSITION')
			}
		},
		computed:mapState({
			imgUrl: state => state.imgUrl,
			editors:state => state.cateStories.editors
		}),
		created() {
			this.setDocumentTitle('主编')
		}
	}
</script>
